<template>
  <div class="common-tag">
    <span
      :class="[{ 'common-tag__active': item.value == props.modelValue }]"
      v-for="(item, index) in props.optionsList"
      :key="index"
      @click="handleChange(item.value)"
      >{{ item.label }}</span
    >
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, watch } from 'vue'
import { CaretBottom } from '@element-plus/icons-vue'
const props = defineProps(['modelValue', 'optionsList'])
const emits = defineEmits(['update:modelValue', 'change'])
const data = reactive({
  value: undefined
})
watch(
  () => props,
  (newVal, oldVal) => {
    console.log('newVal:', newVal)
    data.value = props.modelValue
  },
  {
    immediate: true,
    deep: true
  }
)

const handleChange = (value) => {
  console.log('handleChange:', value)
  emits('update:modelValue', value)
  emits('change', value)
}
onMounted(() => {})
</script>

<style lang="less">
.common-tag {
  display: flex;
  align-items: center;
  color: aliceblue;
  > span {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: rgba(173, 241, 255, 0.08);
    border: 1px solid rgba(173, 241, 255, 0.08);
    border-radius: 2px;
    font-family: Inter;
    font-size: 12px;
    font-weight: normal;
    line-height: 14.04px;
    color: #98a7ad;
    margin-right: 6px;
  }
  > span:nth-last-of-type(1) {
    margin-right: 0px !important;
  }
  .common-tag__active {
    background: rgba(14, 70, 116, 0.3);
    border: 1px solid #5cb6ff;
    color: #5cb6ff;
  }
}
</style>
